import React, { useState, useEffect } from 'react'
import { Menu, Divider, Card } from 'antd'
import { selectAll, selectByProperty } from "../../../request/fake-db"
import Sider from 'antd/es/layout/Sider'
import { useNavigate } from "react-router-dom"

const { Meta } = Card

function Category() {
    const [selectedKey, setSelectedKey] = useState('')
    const [showTestButton, setShowTestButton] = useState(false)
    const [categories, setCategories] = useState([])
    const [clothingItems, setClothingItems] = useState([])
    const navigate = useNavigate()

    useEffect(() => {
        setCategories(selectAll('category'))
        if (categories.length > 0) {
            handleClick(categories[0].id)
        }
    }, [categories])

    const handleClick = async (key) => {
        setSelectedKey(String(key))
        const clickedCategory = categories.find(item => item.id === key)
        if (clickedCategory && clickedCategory.name === "服装" || clickedCategory.name === "手机数码" ||
            clickedCategory.name === "家用电器" || clickedCategory.name === "家具家装" || clickedCategory.name === "汽车用品"
            || clickedCategory.name === "电脑办公") {
            setShowTestButton(true)
            const items = await selectByProperty('item', 'category', clickedCategory.id)
            setClothingItems(items)
        } else {
            setShowTestButton(false)
            setClothingItems([])
        }
    }

    function handleTestItem(itemId) {
        navigate(`/item/${itemId}`)
    }


    return (
        <>
            <Menu
                selectedKeys={[selectedKey]}
                style={{ height: '100vh', width: '25%', maxWidth: '350px' }}
                defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <Sider width='100%' key="sub1" title="所有分类" style={{ width: '100%', textAlign: "center" }}>
                    {categories.map(item => (
                        <React.Fragment key={item.id}>
                            <Menu.Item onClick={() => handleClick(item.id)} key={item.id}>{item.name}</Menu.Item>
                            <Divider style={{ margin: '4px 0' }} />
                        </React.Fragment>
                    ))}
                </Sider>
            </Menu>
            {showTestButton && (
                <div style={{ position: 'fixed', top: '5%', left: '30%', width: '75%' }}>
                    <div style={{ overflowY: 'auto', height: '70vh', display: 'flex', flexWrap: 'wrap', padding: '10px', margin: '10px 0' }} id="ItemsContainer">
                        {clothingItems.map(item => (
                            <div key={item.id} style={{ margin: '5px', boxSizing: 'border-box' }}>
                                <Card
                                    hoverable
                                    style={{ width: '100px', border: '1px solid #e8e8e8', marginBottom: 0 }}
                                    onClick={() => handleTestItem(item.id)}
                                >
                                    <div style={{ height: '100px', overflow: 'hidden', margin: '-13px' }}>
                                        <img alt={item.label} src={item.imgs[0]} style={{ width: '100%', height: 'auto', borderRadius: '10px' }} />
                                    </div>
                                    <Meta
                                        title={<span style={{ display: 'inline-block', width: '100%', fontSize: '14px', textAlign: 'left', marginTop: '10px' }}>{item.label}</span>}
                                    />
                                </Card>
                            </div>

                        ))}
                    </div>
                </div>
            )}
        </>
    )
}

export default Category
